<template>
  <div class="app-container">
    <el-form :inline="true" :model="form" class="demo-form-inline filter-container">
      <el-form-item prop="dateType" label="时间">
        <el-date-picker
          v-model="form.time"
          class="filter-item"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd HH:mm:ss"
          :default-time="['00:00:00', '23:59:59']"
          align="right"
        ></el-date-picker>
      </el-form-item>
     <el-form-item label="账户名：">
        <el-input v-model="form.userName"></el-input>
      </el-form-item>
       <el-form-item v-if="roleCheck('virtual')" class="with-pre-select" label="数据类型">
        <el-select v-model="form.isFake">
          <el-option v-for="item in consts.STATISTICS_RANGE"
                     :key="item.value"
                     :label="item.title"
                     :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-button type="primary" v-waves icon="el-icon-search" @click="submitFilterForm">搜索</el-button>
      <el-button class="filter-item" type="primary" icon="el-icon-download" @click="exportExcel">导出</el-button>
    </el-form>

    <el-table
      :data="tableData"
      show-summary
      :summary-method="getLocalSummaries"
      v-loading="loading"
      element-loading-text="给我一点时间"
      border
      fit
      highlight-current-row
      style="width: 100%"
      :header-cell-class-name="setHeaderStyle"
      :cell-class-name="setCellStyle"
    >

      <el-table-column label="游戏平台" align="center" prop="game">
        <template slot-scope="{row}">
          <span class="game-name" @click="gotoDetail(row)">{{row.game}}</span>
        </template>
      </el-table-column>
      <el-table-column label="转入" align="center" prop="transIn">
        <template slot-scope="{row}">{{row.transIn | currency}}</template>
      </el-table-column>

      <el-table-column label="转出" align="center" prop="transOut">
        <template slot-scope="{row}">{{row.transOut | currency}}</template>
      </el-table-column>
      <el-table-column label="公司总盈利(实际)" align="center" width="150" prop="totalWinReal" sortable>
        <template slot-scope="{row}">{{row.totalWinReal | currency}}</template>
      </el-table-column>
      <!--盈棋牌亏重新计算后的字段-->
      <el-table-column label="公司" align="center" width="130">
          <el-table-column label="投注人数" align="center" width="100" prop="platBetNum" sortable class="color-green">
            <template slot-scope="{row}">{{row.platBetNum}}</template>
          </el-table-column>
          <el-table-column label="投注次数" align="center" width="100" prop="platBetTimes" sortable>
            <template slot-scope="{row}">{{row.platBetTimes}}</template>
          </el-table-column>
          <el-table-column label="总投注额" align="center" width="100" prop="betSum" sortable>
            <template slot-scope="{row}">{{row.betSum | currency}}</template>
          </el-table-column>
          <el-table-column label="有效投注额" align="center" width="110" prop="betEffectSum" sortable>
            <template slot-scope="{row}">{{row.betEffectSum | currency}}</template>
          </el-table-column>
          <el-table-column label="派彩额" align="center" width="100" prop="prizeSum" sortable>
            <template slot-scope="{row}">{{row.prizeSum | currency}}</template>
          </el-table-column>
          <el-table-column label="公司输赢" align="center" width="100" prop="winSum" sortable>
            <template slot-scope="{row}">
              <span v-if="row.winSum>0" style="color:red">{{row.winSum | currency}}</span>
                <span v-else>{{ row.winSum | currency}}</span>
              </template>
          </el-table-column>
      </el-table-column>

      <el-table-column label="玩家对战类"  align="center">
          <el-table-column label="游戏人数" align="center" width="100" prop="playerBetNum" sortable>
            <template slot-scope="{row}">{{row.playerBetNum}}</template>
          </el-table-column>
          <el-table-column label="投注次数" align="center" width="100" prop="playerBetTimes" sortable>
            <template slot-scope="{row}">{{row.playerBetTimes}}</template>
          </el-table-column>
          <el-table-column label="有效投注额" align="center" width="110" prop="playerBetSum" sortable>
            <template slot-scope="{row}">{{row.playerBetSum | currency}}</template>
          </el-table-column>
          <el-table-column label="玩家输赢" align="center" width="100" prop="playerWinSum" sortable>
            <template slot-scope="{row}">{{row.playerWinSum | currency}}</template>
          </el-table-column>
          <el-table-column label="公司抽水" align="center" width="100" prop="playerWaterFee" sortable>
            <template slot-scope="{row}">{{row.playerWaterFee | currency}}</template>
          </el-table-column>
      </el-table-column>

      <!-- <el-table-column label="实际抽水" align="center" width="130" prop="waterFeeReal" sortable>
        <template slot-scope="{row}">{{row.waterFeeReal | currency}}</template>
      </el-table-column> -->
      <el-table-column label="公司总盈利" align="center" width="130" prop="totalWin" sortable>
        <template slot-scope="{row}">{{row.totalWin | currency}}</template>
      </el-table-column>

      <!--结束-->
      <!--新版本不需要的字段-->
      <!-- <el-table-column label="投注人数" align="center" prop="bettingNum"></el-table-column>
      <el-table-column label="投注次数" align="center" prop="bettingTimes"></el-table-column>

      <el-table-column label="总投注额" align="center" prop="bettingTotalSum">
        <template slot-scope="{row}">{{row.bettingTotalSum | currency}}</template>
      </el-table-column>


      <el-table-column label="总派彩额" align="center" prop="prizeSum">
        <template slot-scope="{row}">{{row.prizeSum | currency}}</template>
      </el-table-column>

      <el-table-column label="有效投注额" align="center" prop="bettingSum">
        <template slot-scope="{row}">{{row.bettingSum | currency}}</template>
      </el-table-column>
      <el-table-column label="公司输赢" align="center" prop="winSum">
        <template slot-scope="{row}">
          <span v-if="row.winSum>0" style="color:red">{{row.winSum | currency}}</span>
          <span v-else>{{ row.winSum | currency}}</span>
        </template>
      </el-table-column> -->
      <!-- <el-table-column label="人均投注额" align="center" prop="avgBetSum" width="110">
        <template slot-scope="{row}">{{row.avgBetSum | currency}}</template>
      </el-table-column>
      <el-table-column label="人均投注次数" align="center" prop="avgBetTimes " width="120"></el-table-column> -->
    </el-table>
  </div>
</template>

<script>
import {
  form, grid, dialog, handleDownload,
} from '@/build';
// import { currency, currencyToNumber } from '@/filters';

import { reportGameListApi as listApi } from '@/services/api/report';

export default {
  name: 'report-game',

  mixins: [form, grid, dialog, handleDownload],

  data() {
    const { username, time } = this.$route.query;
    const monthTime = time || [
      `${moment().format('YYYY-MM-DD')} 00:00:00`,
      `${moment().format('YYYY-MM-DD ')} 23:59:59`,
    ];
    return {
      tableData: [],
      form: {
        userName: undefined,
        time: time || monthTime,
        isFake: 0,
      },
      filters: {
        stime: moment(monthTime[0]).valueOf(),
        etime: moment(monthTime[1]).valueOf() + 86399999,
        userName: username,
        export: undefined,
        isFake: 0,
      },
      filterDateType: false,
      statistic: [
        {
          index: 1,
          prop: 'transIn',
          format: value => <div> {_.currency(value)} </div>,
        },
        {
          index: 2,
          prop: 'transOut',
          format: value => <div> {_.currency(value)} </div>,
        },
        {
          index: 3,
          prop: 'totalWinReal',
          format: value => <div> {_.currency(value)} </div>,
        },
        {
          index: 5,
          prop: 'bettingNum',
          format: value => <div> {_.currency(value)} </div>,
        },
        {
          index: 6,
          prop: 'betEffectSum',
          format: value => <div> {_.currency(value)} </div>,
        },
        {
          index: 7,
          prop: 'prizeSum',
          format: value => <div> {_.currency(value)} </div>,
        },
        {
          index: 8,
          prop: 'winSum',
          format: value => <div> {_.currency(value)} </div>,
        },
        {
          index: 9,
          prop: 'playerBetNum',
          format: value => <div> {_.currency(value)} </div>,
        },
        {
          index: 12,
          prop: 'playerWinSum',
          format: value => <div> {_.currency(value)} </div>,
        },
        {
          index: 13,
          prop: 'playerWaterFee',
          format: value => <div> {_.currency(value)} </div>,
        },
        {
          index: 14,
          prop: 'waterFeeReal',
          format: value => <div> {_.currency(value)} </div>,
        },
        {
          index: 15,
          prop: 'totalWin',
          format: value => <div> {_.currency(value)} </div>,
        },
        {
          index: 16,
          prop: 'totalWinReal',
          format: value => <div> {_.currency(value)} </div>,
        },
        {
          index: 17,
          prop: 'bettingSumByPeople',
          format: value => <div> {_.currency(value)} </div>,
        },
        {
          index: 18,
          prop: 'bettingTimesByPeople',
          format: value => <div> {_.currency(value)} </div>,
        },
      ],
    };
  },
  watch: {
    $route: {
      handler(next) {
        if (next.query.username) {
          this.form.userName = next.query.username;
        }
      },
      immediate: true,
    },
  },
  computed: {
    tagNo() {
      return Number(this.$store.state.tagsView.lastTagNo) + 1;
    },
  },
  methods: {
    setHeaderStyle({
      row, column, rowIndex, columnIndex,
    }) {
      if ([4].includes(columnIndex) && rowIndex == 0) {
        return 'header-green';
      }
      if ([0, 1, 2, 3, 4, 5].includes(columnIndex) && rowIndex == 1) {
        return 'header-green';
      }
      if ([5].includes(columnIndex) && rowIndex == 0) {
        return 'header-yellow';
      }
      if ([6, 7, 8, 9, 10].includes(columnIndex) && rowIndex == 1) {
        return 'header-yellow';
      }
      if ([6].includes(columnIndex)) {
        return 'border-left';
      }
    },
    setCellStyle({
      row, column, rowIndex, columnIndex,
    }) {
      if ([4, 5, 6, 7, 8, 9].includes(columnIndex)) {
        return 'header-green';
      }
      if ([10, 11, 12, 13, 14].includes(columnIndex)) {
        return 'header-yellow';
      }
      if ([15].includes(columnIndex)) {
        return 'border-left';
      }
    },
    gotoDetail(row) {
      const query = {
        gamePlatformId: row.platformId * 1, time: this.form.time, add: true, tagNo: this.tagNo,
      };
      if ([8000,19000,12000].includes(row.platformId)) {
        Object.assign(query, {
          tab: 'two',
          newView: true,
        });
      }
      this.$router.push({
        path: '/game/game-bet-list',
        query,
      });
    },
    submitFilterForm() {
      const { time, isFake } = this.form;
      let stime;
      let etime;
      if (!_.isUndefined(time) && _.isArray(time)) {
        stime = moment(time[0]).valueOf();
        etime = moment(time[1]).valueOf() + 999;
      }

      this.filters = {
        ...this.filters, ...this.form, stime, etime, isFake,
      };
      this.getAll();
    },
  },

  mounted() {
    this.bindGet(listApi, 'tableData', {
      action: 'getGrid',
      sendingData: 'filters',
      format: data => _.filter(data, item => [9].indexOf(item.channelId) <= -1),
    });

    this.getAll();
  },
};
</script>
<style scoped>

.game-name {
  cursor: pointer;
  color: #409eff;
  text-decoration: underline;
}

</style>
<style>
.header-green{background: rgb(235,235,255) !important;color:#333;border:1px solid #aaa;}
.header-yellow{background:  rgb(255,235,235) !important;color:#333;border:1px solid #aaa;}
.border-left{border-left:1px solid #aaa;}
</style>
